import React from 'react';
import { useState } from 'react';
import Echarts from '../../../components/Echarts'
import Tu1 from '../../../components/echarts/Tu1';
import Tu2 from '../../../components/echarts/Tu2';
import Tu3 from '../../../components/echarts/Tu3';
import { Skeleton, } from 'antd';
import { useEffect } from 'react';
import '../../../style/stuecharts.scss'
import axios from 'axios'
function StudentEcharts(props) {
  var [datalist, setDatalist] = useState({})
  useEffect(() => {
    axios.get('/datalist').then((res) => {
      setDatalist(res.data)
    })
  }, [])
  // name是组件title，type是组件类型pie饼图
  var titlelist = { name: '各年级男女数量', type: ['bar', 'bar'] }
  return (
    <div className='studentecharts' style={{ marginTop: "60px" }}>
      <div className="left" style={{ display: "flex", }}>
        <div className="tu1" style={{ width: "60%", height: 300 }}>
          <Tu1 />
        </div>
        <div className="tu2" style={{ padding: '20px 0' }} >
          {
            datalist.length ? <Echarts style={{ width: "40%", height: 500 }} titlelist={titlelist} datalist={datalist} /> : <Skeleton active />
          }
        </div>
      </div>

      <div className="right" style={{ marginTop: 60, display: 'flex', justifyContent: 'space-around' }}>
        <div className="tu3" style={{ paddingLeft: 50 }}>
          <Tu2 />
        </div>
        <div className="guanxi" style={{ width: 600, height: 500 }}>
          <Tu3 />
        </div>

      </div>

    </div >
  );
}

export default StudentEcharts;